<template>
	<view>
		<view class="myWallet">
			<view class="wallet_box_1" style="background: url('https://qiniu.scxhrd.com/static/img/wallet.png') no-repeat;	background-size: 100% 100%;">
				<view class="account" data-tap_type="tap_3"  @tap="changeTab($event)">
					￥&nbsp{{user_info.price}}
				</view>
				<view class="account_text" :class="current_tap==='tap_3'? 'active' : ''" data-tap_type="tap_3"  @tap="changeTab($event)">现金账户</view>
				<view class="tap_type">
					<view :class="current_tap==='tap_1'? 'active' : ''" data-tap_type="tap_1" @tap="changeTab($event)">
						<view class="tips_money">￥{{user_info.total_profit_price}}</view>
						<view class="tips">配货券</view>
					</view>
					<view :class="current_tap==='tap_2'? 'active' : ''" data-tap_type="tap_2" @tap="changeTab($event)">
						<view class="tips_money">￥{{user_info.ticket_money}}</view>
						<view class="tips">储备券</view>
					</view>
					<view @tap="goToNext()">
						<view class="tips_money">￥{{user_info.integral_num}}</view>
						<view class="tips">积分账户</view>
					</view>
				</view>
			</view>
			<view v-show="current_tap==='tap_1'">
				<view class="wallet_box_2" >
					<view>名称</view>
					<view>单价</view>
					<view>数量</view>
					<view>市价</view>
				</view>
				<view class="wallet_box_3">
					<view v-if="orderList.length===0">
						<mNodata></mNodata>
					</view>
					<view v-else v-for="(item,index) in orderList" :key="index">
						<view class="type_name">类型：{{item.type_name}}</view>
						<view class="wallet_box_3_1">
							<view class="tap_1_name">{{item.product_name}}</view>
							<view>{{item.price}}</view>
							<view>{{item.market_value}}</view>
							<view class="market_money">{{item.exchange_integral_num}}</view>
						</view>
						<view v-if="item.status===1" class="wallet_box_3_2">
							<view><button class="box_1_button_2 button_green" @tap="zhuanrang(item)">转让</button></view>
							<view><button class="box_1_button_2 button_red" @tap="tihuo1(item)">提货</button></view>
							<view><button class="box_1_button_2 button_orange"@tap="duihuan(item)">兑换</button></view>
						</view>
						<view v-if="item.status===2" class="wallet_box_3_2">
							<view><button class="box_1_button_1">{{item.fight_percent}}</button></view>
							<view><button class="box_1_button_2" @tap="quxiao(item)">取消转让</button></view>
						</view>
					</view>
				</view>
				<view class="bottom"></view>
			</view>
			<view v-show="current_tap==='tap_1'" class="detail_button"><button class="detail" @tap="watchDetail()">查看明细</button></view>
			<view class="tap_2_top_box"  v-show="current_tap==='tap_2'">
				<view v-if="tihuo_orderList.length===0">
					<mNodata></mNodata>
				</view>
				<view v-else class="tap_2_box" v-for="(item,index) in tihuo_orderList" :key="index">
					<view class="tap_2_box_1">
						<view class="tap_2_goods_name">{{item.name}}</view>
						<view class="tap_2_time">{{item.created_at}}</view>
					</view>
					<view class="tap_2_box_2">
						<view v-if="item.type==='3'" class="tap_2_money">+{{item.money}}</view>
						<view v-if="item.type==='4'" class="tap_2_money_1">-{{item.money}}</view>
						<view v-if="item.type==='5'" class="tap_2_money">+{{item.money}}</view>
						<view v-if="item.type==='3'" class="tap_2_text">转让配货券</view>
						<view v-if="item.type==='4'" class="tap_2_text">释放储备券</view>
						<view v-if="item.type==='5'" class="tap_2_text">本月储备分红</view>

					</view>
				</view>


			</view>

			<view class="tap_2_top_box"  v-show="current_tap==='tap_3'">
				<view class="money_account">
					<view><image class="money_image" :src="img_url+'static/img/money_account.png'"/></view>
					<view class="money_text">现金账户</view>
				</view>

				<view style="width: 100%;height: 6px;background-color:#F7F7F7;"></view>

				<view v-if="money_detail_list.length===0">
					<mNodata></mNodata>
				</view>
				<view v-else class="tap_2_box" v-for="(item,index) in money_detail_list" :key="index">
					<view class="tap_2_box_1">
						<view class="tap_2_goods_name">{{item.name}}</view>
						<view class="tap_2_time">{{item.created_at}}</view>
					</view>
					<view class="tap_2_box_2">
						<view class="tap_2_money" :class="item.is_add===1? 'add' : 'no_add'">{{item.show_price}}</view>
						<view class="tap_2_text">{{item.type_name}}</view>
					</view>
				</view>

			</view>
		</view>
		<van-dialog id="van-dialog" />
	</view>

</template>

<script>
	import Dialog from "../../wxcomponents/vant/dist/dialog/dialog";
	export default {
		name: "myWallet",
		data() {
			return {
				show:true,
				user_info:{
					total_profit_price:'0.00',
					total_settlement_price:'0.00',
					ticket_money:'0.00',
					integral_num:'0.00',
					price:'0.00'
				},
				current_tap:'tap_1',
				orderList:[],
				tihuo_orderList:[],
				money_detail_list:[],
				page:1,
				is_load:0,
				img_url:this.$mConfig.assetsPath,
				click_query:false

			}
		},
		onReachBottom() {  //分页加载请求数据
			if(this.is_load>0){
				if(this.current_tap==='tap_1'){
					this.myProfitRecord()
				}else if(this.current_tap==='tap_2'){
					this.mySettlementPosition()
				}else if(this.current_tap==='tap_3'){
					this.getPriceChangeRecord()
				}

			}else{
				uni.showToast({
					title:"没有更多数据啦",
					icon:"none",
				})
			}

		},
		async onShow(){
			let resData= await this.$apis.getUserInfo({access_token:''})
			if(resData.code===0){
				this.user_info=resData.data
			}
			this.page=1
			this.is_load=0
			this.orderList=[]
			this.tihuo_orderList=[]
			this.money_detail_list=[]
			if(this.current_tap==='tap_1'){
				await this.myProfitRecord()
			}else if(this.current_tap==='tap_2'){
				await this.mySettlementPosition()
			}else if(this.current_tap==='tap_3'){
				await this.getPriceChangeRecord()
			}
		},
		mounted() {},
		methods: {
			changeTab(res){
				if(this.current_tap===res.currentTarget.dataset.tap_type){
					return
				}else{
					this.current_tap=res.currentTarget.dataset.tap_type;
					this.page=1
					this.is_load=0
					this.orderList=[]
					this.tihuo_orderList=[]
					this.money_detail_list=[]
					if(this.current_tap==='tap_1'){
						this.myProfitRecord()
					}else if(this.current_tap==='tap_2'){
						this.mySettlementPosition()
					}else if(this.current_tap==='tap_3'){
						this.getPriceChangeRecord() //获取现金明细
					}
				}

			},
			goToNext(){
				this.$router.push({
					route:this.$routesConfig.pointsMore,
				})
			},
			watchDetail(){ // 查看明细
				this.$router.push({
					route:this.$routesConfig.saleGoodsDetail,
				})
			},
			async myProfitRecord(){ //获取我的销售配货明细
				uni.showLoading({})
				let resData = await this.$apis.myProfitRecord({access_token: '',page:this.page})
				console.log(resData)
				if(resData.code===0){
					this.orderList.push(...resData.data.lists)
					this.is_load=resData.data.is_load
					this.page++
				}
				uni.hideLoading()
			},
			async mySettlementPosition(){ //获取我的储备券明细
				uni.showLoading({})
				let resData =await this.$apis.mySettlementPosition({access_token: '',page:this.page})
				if(resData.code===0){
					this.tihuo_orderList.push(...resData.data.lists)
					this.is_load=resData.data.is_load
					this.page++
				}
				uni.hideLoading()
			},

			async getPriceChangeRecord(){ //获取现金账户明细
				uni.showLoading({})
				let resData =await this.$apis.getPriceChangeRecord({access_token: '',page:this.page})
				if(resData.code===0){
					this.money_detail_list.push(...resData.data.lists)
					this.is_load=resData.data.is_load
					this.page++
				}
				uni.hideLoading()
			},

			tihuo1(item){ // 销售配货提货 跳转页面
				this.$router.push({
					route:this.$routesConfig.profitPositionPickUp,
					query:{market_value:item.market_value,profit_position_id:item.id}
				})
			},
			async tihuo2(item){ // 提货券提货  跳转页面
				uni.showLoading({})
				let res= await  this.$apis.pickUpNumber({id:item.id})
				uni.hideLoading()
				if(res.code===0){
					this.$router.push({
						route:this.$routesConfig.pickUpSettlement,
						query:{id:item.id}
					})
				}

			},
			zhuanrang(item){ // 销售配货转让
				if(!this.click_query) {
					this.click_query = true
					Dialog.confirm({
						title: '',
						message: '确认转让？',
					})
							.then(async () => {
								uni.showLoading({})
								let res = await this.$apis.myProfitPositionSale({
									access_token: '',
									profit_position_id: item.id
								})
								if (res.code === 0) {
									setTimeout(() => {
										this.page = 1
										this.is_load = 0
										this.orderList = []
										this.tihuo_orderList = []
										if (this.current_tap === 'tap_1') {
											this.myProfitRecord()
										} else if (this.current_tap === 'tap_2') {
											this.mySettlementPosition()
										}
										uni.hideLoading()
									}, 1000)
								}

							})
					this.click_query=false
				}
			},
			duihuan(item){ // 销售配货兑换积分 跳转页面
				this.$router.push({
					route:this.$routesConfig.positionConversionIntegral,
					query:{points:item.profit_num,profit_position_id:item.id,product_name:item.product_name}
				})
			},
		    quxiao(item){ //取消销售配货转让挂卖
				if(!this.click_query) {
					this.click_query = true
					Dialog.confirm({
						title: '取消转让',
						message: '确认取消转让订单吗？',
					})
							.then(async () => {
								uni.showLoading({})
								let res = await this.$apis.cancelProfitSale({
									access_token: '',
									profit_position_id: item.id
								})
								if (res.code === 0) {
									setTimeout(() => {
										this.page = 1
										this.is_load = 0
										this.orderList = []
										this.tihuo_orderList = []
										if (this.current_tap === 'tap_1') {
											this.myProfitRecord()
										} else if (this.current_tap === 'tap_2') {
											this.mySettlementPosition()
										}
										uni.hideLoading()
									}, 1000)
								}

							})
					this.click_query=false
				}
			},



		}

	}
</script>
<style lang="less" scoped>
	.wallet_box_1{
		height: 370rpx;
	}
	.account{
		font-size: 60rpx;
		color: #ffffff;
		text-align: center;
		padding-top:39rpx;
	}
	.account_text{
		font-size: 22rpx;
		text-align: center;
		color: #ffffff;
		margin-top: 10rpx;
		margin-left: 43%;
		width: 100rpx;
	}
	.tap_type{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 70rpx;
		color:#ffffff;
	}
	.tips{
		font-size: 22rpx;
		text-align: center;
	}
	.tips_money{
		font-size: 26rpx;
		text-align: center;
	}
	.active{
		border-bottom: solid 0.5px #FFFFFF;
		padding-bottom: 10rpx;
	}
	.wallet_box_2{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		background-color:#F6F6F6 ;
		color:#999999 ;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}
	.wallet_box_3{
		/*height: 350rpx;*/
		/*overflow-y: scroll;*/
		border-bottom: solid 0.5px #F6F6F6;
		margin-bottom: 120rpx;
	}
	.wallet_box_3_1{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		font-size: 26rpx;
		padding-top: 20rpx;
	}
	.market_money{
		color: #FF9502;
	}
	.wallet_box_3_2{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 40rpx;
		margin-bottom: 50rpx;
		button{
			border: none;
			border-radius: 5px;
			color: #ffffff;
			width: 165rpx;
			height:60rpx;
			font-size: 26rpx;
			line-height: 2.3;
		}
		.box_1_button_1{
			background-color: #50A34E;
			margin-right: 15rpx;
		}
		.box_1_button_2{
			background-color: #E96233;
			margin-left: 20rpx;
		}
	}
	.detail{
		border: none;
		border-radius: 5px;
		color: #ffffff;
		width: 170rpx;
		height:70rpx;
		font-size: 26rpx;
		background-color: #FF9502;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	.tap_1_name{
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		width: 20%;
		margin-left: -28rpx;
	}
	.tap_2_box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: solid 0.5px #F4F4F4;
	}
	.tap_2_goods_name{
		font-size: 30rpx;
		color: #333333;
	}
	.tap_2_money{
		font-size: 36rpx;
		color: #E75D2C;
		margin-left: 10rpx;
		/*margin-top: 28rpx;*/
		text-align: left;
		width: 150rpx;
	}
	.tap_2_money_1{
		font-size: 36rpx;
		color: green;
		margin-left: 10rpx;
		/*margin-top: 28rpx;*/
		text-align: left;
		width: 200rpx;
	}
	.tap_2_time{
		font-size: 22rpx;
		color: #666666;
		margin-top: 40rpx;
	}
	.tap_2_button{
		border: none;
		color: #ffffff;
		font-size: 28rpx;
		width: 120rpx;
		height: 60rpx;
		background-image: linear-gradient(to top, #E96231 , #E79A38);
		line-height: 2.2;
		margin-top: 17rpx;
	}
	.tap_2_top_box{
		margin-top: 20rpx;
	}
	.button_green{
		background-color: #4cd964 !important;
	}
	.button_red{
		background-color: firebrick !important;
	}
	.button_orange{
		background-color: #FF9502 !important;
	}
	.detail_button{
		position: fixed;
		bottom: 0;
		/*margin-bottom: 40rpx;*/
		width: 100%;
		background-color: #ffffff;
	}
	.money_account{
		display: flex;
		flex-direction: row;
		justify-content: left;
		margin-left: 10rpx;
	}
	.money_image{
		width: 40rpx;
		height: 40rpx;
	}
	.money_text{
		font-size: 31rpx;
		margin-left: 10rpx;
	}
	.tap_2_text{
		font-size: 28rpx;
		text-align: right;
		width: 200rpx;
		margin-top: 20rpx;
	}
	.tap_2_box_2{
		margin-right: 5rpx;
	}
	.add{
		color: #5BAA59 !important;
	}
	.no_add{
		color: firebrick !important;
	}
	.bottom{
		height: 5rpx;
    }
	.type_name{
		font-size: 24rpx;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}
</style>

